extends layout
block content
    #test-highlight1
        p #[| 什么是] #[span jQuery]
        p #[span jQuery] #[| 是目前最流行的] #[span JavaScript] #[| 库]
    #test-highlight2
        p #[| 什么是] #[span jQuery] #[span Plugin]
        p #[| 编写] #[span jQuery] #[span Plugin] #[| 可以用来扩展] #[span jQuery] #[| 的功能]
    #test-highlight
        p #[| 什么是] #[span jQuery] #[span Plugin]
        p #[| 编写] #[span jQuery] #[span Plugin] #[| 可以用来扩展] #[span jQuery] #[| 的功能]
append scripts
    script.
        // 给 jQuery 对象绑定一个新方法是通过扩展 $.fn 对象实现的, 让我们来编写第一个扩展 highlight1()
        $.fn.highlight_1 = function (options) {  // 要考虑到各种情况: 1. options 为 undefined; 2.options 只有部分 key
            var bgcolor = options && options.backgroundColor || '#fffceb';
            var color = options && options.color || '#d85030';  // 对于默认值的处理, 我们用了一个简单的&&和||短路操作符, 总能得到一个有效的值
            this.css('backgroundColor', bgcolor).css('color', color);
            return this;
        }  // 函数内部的 this 在调用时被绑定为 jQuery 对象, 所以函数内部代码可以正常调用所有 jQuery 对象的方法
        // 为什么最后要 return this; 因为 jQuery 对象支持链式操作, 我们自己写的扩展方法也要能继续链式下去
        $('#test-highlight1 span').highlight_1().hide(3000);  // return this; 使自己的方法支持链式
        $('#test-highlight2 span').highlight_1({ backgroundColor: '#00a8e6', color: '#ffffff' });
        // extend() 合并默认值和用户设定值, 第二种处理参数的方法, 推荐
        // $.extend(target, obj1, obj2, ...), 它把多个 object 对象的属性合并到第一个 target 对象中, 同名属性使用靠后的对象的值, 越往后优先级越高
        // $.fn.highlight.defaults 支持用户自己定义默认的颜色
        $.fn.highlight= function (options) {
            var opts = $.extend({}, $.fn.highlight.defaults, options);  // 合并默认值和用户设定值
            this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);
            return this;
        }
        $.fn.highlight.defaults = { color: '#d85030', backgroundColor: '#fff8de' }  // 设定默认值
        $.fn.highlight.defaults.color = '#fff';
        $.fn.highlight.defaults.backgroundColor = '#000';  // 只需要一次设置 defaults, 以后直接调用 highlight()
        $('#test-highlight p:first-child span').highlight();
        $('#test-highlight p:last-child span').highlight({ color: '#dd1144' });  // 参数可以自己设置
        // 最终, 我们得出编写一个 jQuery 插件的原则
        // 1. 给 $.fn 绑定函数, 实现插件的代码逻辑
        // 2. 插件函数最后要 return this; 以支持链式调用
        // 3. 插件函数要有默认值, 绑定在 $.fn.<pluginName>.defaults 上
        // 4. 用户在调用时可传入设定值以便覆盖默认值
        // 针对特定元素编写扩展, 见廖大 jQuery-扩展
